<template>
  <el-dialog refs="elDialogRef" class="dialog-panel" :visible="visible" v-on="$listeners" v-bind="$attrs"
    v-dialogDrag="visible" :closeOnPressEscape="false" :closeOnClickModal="false" :width="width" append-to-body
    lock-scroll @open="onOpenDialog()" @close="onCloseDialog()">
    <template v-if="$slots.title">
      <template slot="title">
        <slot name="title"></slot>
      </template>
    </template>
    <slot></slot>
    <template v-if="$slots.footer">
      <template slot="footer">
        <slot name="footer"></slot>
      </template>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'jy-dialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: '80%',
    }
  },
  methods: {
    onCloseDialog () {
      var mo = function (e) { e.preventDefault(); };
      document.body.style.overflow = '';//出现滚动条
      document.removeEventListener("touchmove", mo, false);
      this.$emit('update:visible', false);
    },
    onOpenDialog () {
      var mo = function (e) { e.preventDefault(); };
      document.body.style.overflow = 'hidden';
      document.addEventListener("touchmove", mo, false);//禁止页面滑动
    },
  },
};
</script>
<style scoped lang="scss">
.dialog-panel {
  ::v-deep .el-dialog__body {
    max-height: calc(88vh - 120px);
    overflow: auto;
  }

  ::v-deep .is-full-screen .el-dialog__body {
    max-height: calc(100vh - 120px) !important;
    overflow: auto;
  }
}
</style>
